<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>注册页面</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/static/img/favicon.svg" >
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/css/reset.css"><!--重置css-->
    <link rel="stylesheet" href="/static/bootstrap/font/bootstrap-icons.css"><!--bootstrap图标库css-->
    <link rel="stylesheet" href="/static/js/message/message.css"><!--弹窗css-->
    <link rel="stylesheet" type="text/css" href="/static/css/commons.css"><!--登录注册通用css-->
    <link rel="stylesheet" type="text/css" href="/static/css/register.css"><!--注册css-->
    <script src="/static/js/vue/vue.js"></script><!--vue.js-->
    <script src="/static/js/message/message.js"></script><!--弹窗js-->
    <script src="/static/js/axios/axios.min.js"></script><!--axios.js-->
</head>
<body>
<img class="wave" src="/static/img/bg_register_wave.svg" alt="背景">
<div class="container" id="register">

    <div class="img">
        <img src="/static/img/bg_register_hezuo.svg">
    </div>
    <div class="login-content">
        <form>

            <img src="/static/img/avatar_woman.svg" style="height: 100px;cursor: pointer" @click="join" alt="头像">

            <h2 class="title">欢迎加入</h2>
            <p style="color: red" th:text="${msg}"></p>
            <div class="input-div" style="margin-top: 0;">
                <div class="i">
                    <i class="bi bi-envelope-fill"></i>
                </div>
                <div class="div">
                    <h5 class="hint">邮箱</h5>
                    <input type="text" name="email" v-model="email" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="bi bi-person-bounding-box"></i>
                </div>
                <div class="div">
                    <h5 class="hint">用户名</h5>
                    <input type="text" name="username" v-model="username" @focus="add($event.target)" @blur="check($event.target)"  class="input" autocomplete="off" required>
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="bi bi-shield-lock-fill"></i>
                </div>
                <div class="div">
                    <h5 class="hint">密码</h5>
                    <input type="password" name="password" v-model="password" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="bi bi-shield-lock"></i>
                </div>
                <div class="div">
                    <h5 class="hint">确认密码</h5>
                    <input type="password" name="confirmPassword" v-model="confirmPassword" @focus="add($event.target)" @blur="remove($event.target)" class="input" required>
                </div>
            </div>
            <a href="/login">已有账号?</a>
            <input type="button" @click="register" class="btn" value="注 册">
        </form>
    </div>
</div>
<script>
    let register = new Vue({
        el : '#register',
        data : {
            email : '',
            username : '',
            password : '',
            confirmPassword : '',
            flag : false,
        },
        methods : {
            join(){
                Qmsg.success("你还在等什么呢？快快加入我们吧~",{position:'center'});
            },
            add(el){
                let parent = el.parentNode.parentNode;
                parent.classList.add("focus");
            },
            remove(el){
                let parent = el.parentNode.parentNode;
                if(el.value === ""){
                    parent.classList.remove("focus");
                }
            },
            check(el){
/*                let parent = el.parentNode.parentNode;
                if(el.value === ""){
                    parent.classList.remove("focus");
                }*/
                if (this.username.trim() === "" ){
                    console.log("check空值")
                    this.remove(el)
                    return false;
                }else{
                    let parent = el.parentNode.parentNode;
                    axios({
                        method : "POST",
                        url :"/check",
                        data : {
                            username : this.username,
                        },
                    }).then((response)=>{
                        if (response.data === true){
                            console.log("check有值且合法")
                            parent.classList.remove("error");
                            this.flag = true
                        }else {
                            console.log("check有值且违法")
                            parent.classList.add("error");
                            Qmsg.info("用户名重复！");
                        }
                    }).catch(function (error) {
                        Qmsg.info("接口访问失败",{position:'center'});
                    });
                }
            },
            register(){//确认更新，真正的更新方法
                if (this.email.trim() === "" || this.username.trim() === "" || this.password.trim() === "" || this.confirmPassword.trim() === ""){
                    Qmsg.warning("需要全部填写哦~",{position:'center',timeout:2000});return false;
                }
                else if (this.flag){
                    if (this.password === this.confirmPassword){
                        axios({
                            method : "POST",
                            url:"/register",
                            params: {
                                email : this.email,
                                username : this.username,
                                password : this.password,
                            },
                            headers:{
                                'Content-type': 'application/x-www-form-urlencoded'
                            },
                        }).then((response)=>{
                            if (response.data.msg === "注册失败"){
                                Qmsg.info(response.data.msg);
                            }else {
                                Qmsg.success(response.data.msg,{showClose:false});
                                this.email = ""
                                this.username = ""
                                this.password = ""
                                this.confirmPassword = ""
                            }
                        }).catch(function (error) {
                            Qmsg.info("接口访问失败");
                        });
                    }else {
                        Qmsg.warning("密码不一致");return false;
                    }
                }else {
                    Qmsg.warning("用户名重复");return false;
                }
            },
        },
        beforeMount (){//页面挂载之前
            /*消息弹窗全局配置*/
            Qmsg.config({
                showClose:true,
                timeout:2000,
                position:'center',
                autoClose:true
            })
        },
        mounted(){//页面挂载之后
        },
    });

</script>
</body>
</html>
